import Vue from 'vue'
import store from '@/store'
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
Vue.directive('permission', {

  /**
   * inserted：被绑定元素插入父节点时调用
   * el：指令所绑定的元素，可以用来直接操作 DOM
   * binding.value：指令的绑定值 { key: PAGE_NAME, value: BUTTON_NAME}
   */
  inserted(el, binding) {
    const buttonMap = binding.value
    // 代表某个元素需要通过权限验证
    if (buttonMap) {
      const result = checkPermission(buttonMap.key, buttonMap.value)
      if (!result) { // 没有权限
        el.remove() // 删除按钮
      }
    } else {
      throw new Error('缺少唯一指令')
    }
  }
})
// 检测传入的元素key是否可以显示
function checkPermission(key, value) {
  // 获取权限数组
  const valueList = store.getters.btns && store.getters.btns[key]
  if (!valueList || !valueList.length) return false
  return !!valueList.find(v => v === value)
}
